<template>
  <div style="height: 500px; width: 500px; border: 1px solid #ccc; position: relative;">
    <vue-draggable-resizable :w="width" :h="height" @dragging="onDrag" @resizing="onResize" :parent="true"
                             class-name="my-class">
      <!--<p>Hello! I'm a flexible component. You can drag me around and you can resize me.<br>-->
      <!--X: {{ x }} / Y: {{ y }} - Width: {{ width }} / Height: {{ height }}</p>-->
      <div id="myChart" :style="{ width: wd + 'px', height: hh+'px' }"></div>
    </vue-draggable-resizable>
  </div>
</template>

<script>
  import VueDraggableResizable from '@/components/vue-draggable-resizable'
  import {addEvent} from '@/utils/dom'
  // optionally import default styles
  import '@/components/vue-draggable-resizable.css'

  export default {
    'name': 'VueDraggableResizableTest',
    'components': {
      VueDraggableResizable
    },
    'data': function () {
      return {
        'width': 300,
        'height': 300,
        'x': 0,
        'y': 0,
        'myChart': {}
      }
    },
    'computed': {
      'wd': function () {
        return this.width
      },
      'hh': function () {
        return this.height
      }
    },
    mounted () {
      console.log(this.hh)

      this.myChart = this.drawLine() // 初始化
      // window.addEventListener('resize', function () {
      //   this.myChart.resize()
      // })
      addEvent(window, 'resize', () => {
        this.myChart.resize()
      })
    },
    'methods': {
      'onResize': function (x, y, width, height) {
        this.x = x
        this.y = y
        this.width = width
        this.height = height
        this.myChart.resize()
      },
      'onDrag': function (x, y) {
        this.x = x
        this.y = y
      },
      drawLine () {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表

        myChart.setOption({
          'title': {'text': '在Vue中使用echarts'},
          'tooltip': {},
          'xAxis': {
            'data': ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          'yAxis': {},
          'series': [{
            'name': '销量',
            'type': 'bar',
            'data': [5, 20, 36, 10, 10, 20]
          }]
        })

        return myChart
      }
    }
  }
</script>

<style scoped>
  .my-class {
    background-color: #EEEEEE;
    border: 1px solid #333;
  }
</style>
